<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>悟诚数移动据分析平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="tailwindcss.js"></script>
    <!-- 引入Font Awesome -->
    <link href="font-awesome.min.css" rel="stylesheet">
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 蓝色作为主色调
                        secondary: '#10B981', // 绿色作为辅助色
                        warning: '#F59E0B', // 警告色
                        danger: '#EF4444', // 危险色
                        success: '#10B981', // 成功色
                        neutral: {
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            300: '#D1D5DB',
                            400: '#9CA3AF',
                            500: '#6B7280',
                            600: '#4B5563',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .card-hover {
                transition: transform 0.2s, box-shadow 0.2s;
            }
            .card-hover:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .tab-active {
                color: #3B82F6;
                border-bottom: 2px solid #3B82F6;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-800">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-4 flex items-center justify-between">
            <div class="flex items-center">
                <button id="back-button" class="mr-3 text-neutral-600 hover:text-primary transition-colors" onclick="window.location.href='index.html'">
                    <i class="fa fa-arrow-left text-xl"></i>
                </button>
                <h1 class="text-xl font-bold text-neutral-800">销售分析</h1>
            </div>
        </div>
        <!-- 标签页导航 -->
        <div class="border-b border-neutral-200">
            <div class="container mx-auto px-4">
                <div class="flex space-x-8">
                    <button id="performance-tab" class="py-4 px-1 text-sm font-medium tab-active" onclick="switchTab('performance')">
                        业绩汇总
                    </button>
                    <button id="payment-tab" class="py-4 px-1 text-sm font-medium text-neutral-500" onclick="switchTab('payment')">
                        区域回款
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 内容区域 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 业绩汇总标签页 -->
        <div id="performance-content" class="space-y-6">
            <!-- 业绩汇总排行榜 -->
            <div class="bg-white rounded-lg p-4 card-shadow">
                <h2 class="text-lg font-semibold mb-4">业绩达成率排行榜</h2>
                <!-- 使用Chart.js创建横向柱状图 -->
                <div class="h-[400px] w-full">
                    <canvas id="performanceRankingChart"></canvas>
                </div>
            </div>

            <!-- 业绩汇总卡片列表 -->
            <div class="space-y-4">
                <!-- 华东大区 -->
                <div class="bg-white rounded-lg overflow-hidden card-shadow card-hover">
                    <div class="p-4 border-b border-neutral-100">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <h3 class="font-semibold text-lg">华东大区</h3>
                                <span class="inline-flex items-center justify-center w-3 h-3 rounded-full bg-green-500"></span>
                            </div>
                            <span class="text-sm text-neutral-500">区域经理: 王芳</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-neutral-200">
                                        <th class="py-3 text-left font-semibold text-neutral-600">指标</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2025年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2024年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">同期差异</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">年度目标</td>
                                        <td class="py-3 text-right text-neutral-800">¥9,562,800</td>
                                        <td class="py-3 text-right text-neutral-600">¥8,972,100</td>
                                        <td class="py-3 text-right text-success">+6.6%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">面积(万㎡)</td>
                                        <td class="py-3 text-right text-neutral-800">42.8</td>
                                        <td class="py-3 text-right text-neutral-600">38.6</td>
                                        <td class="py-3 text-right text-success">+10.9%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">中标金额</td>
                                        <td class="py-3 text-right text-neutral-800">¥9,467,172</td>
                                        <td class="py-3 text-right text-neutral-600">¥8,254,332</td>
                                        <td class="py-3 text-right text-success">+14.7%</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 text-neutral-700">达成率</td>
                                        <td class="py-3 text-right font-semibold text-success">99.0%</td>
                                        <td class="py-3 text-right font-semibold text-success">92.0%</td>
                                        <td class="py-3 text-right text-success">+7.0%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4 text-right">
                            <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                                <span>查看详情</span>
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 陕西大区 -->
                <div class="bg-white rounded-lg overflow-hidden card-shadow card-hover">
                    <div class="p-4 border-b border-neutral-100">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <h3 class="font-semibold text-lg">陕西大区</h3>
                                <span class="inline-flex items-center justify-center w-3 h-3 rounded-full bg-green-500"></span>
                            </div>
                            <span class="text-sm text-neutral-500">区域经理: 李强</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-neutral-200">
                                        <th class="py-3 text-left font-semibold text-neutral-600">指标</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2025年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2024年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">同期差异</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">年度目标</td>
                                        <td class="py-3 text-right text-neutral-800">¥7,008,559</td>
                                        <td class="py-3 text-right text-neutral-600">¥6,527,361</td>
                                        <td class="py-3 text-right text-success">+7.4%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">面积(万㎡)</td>
                                        <td class="py-3 text-right text-neutral-800">13.6</td>
                                        <td class="py-3 text-right text-neutral-600">42.7</td>
                                        <td class="py-3 text-right text-danger">-68.1%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">中标金额</td>
                                        <td class="py-3 text-right text-neutral-800">¥6,636,621</td>
                                        <td class="py-3 text-right text-neutral-600">¥6,493,829</td>
                                        <td class="py-3 text-right text-success">+2.2%</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 text-neutral-700">达成率</td>
                                        <td class="py-3 text-right font-semibold text-success">94.7%</td>
                                        <td class="py-3 text-right font-semibold text-success">99.5%</td>
                                        <td class="py-3 text-right text-danger">-4.8%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4 text-right">
                            <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                                <span>查看详情</span>
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 华北大区 -->
                <div class="bg-white rounded-lg overflow-hidden card-shadow card-hover">
                    <div class="p-4 border-b border-neutral-100">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <h3 class="font-semibold text-lg">华北大区</h3>
                                <span class="inline-flex items-center justify-center w-3 h-3 rounded-full bg-blue-500"></span>
                            </div>
                            <span class="text-sm text-neutral-500">区域经理: 张明</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-neutral-200">
                                        <th class="py-3 text-left font-semibold text-neutral-600">指标</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2025年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2024年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">同期差异</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">年度目标</td>
                                        <td class="py-3 text-right text-neutral-800">¥7,844,369</td>
                                        <td class="py-3 text-right text-neutral-600">¥5,936,537</td>
                                        <td class="py-3 text-right text-danger">-20.0%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">面积(万㎡)</td>
                                        <td class="py-3 text-right text-neutral-800">21.2</td>
                                        <td class="py-3 text-right text-neutral-600">37.5</td>
                                        <td class="py-3 text-right text-danger">-43.5%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">中标金额</td>
                                        <td class="py-3 text-right text-neutral-800">¥5,936,537</td>
                                        <td class="py-3 text-right text-neutral-600">¥7,464,637</td>
                                        <td class="py-3 text-right text-danger">-20.5%</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 text-neutral-700">达成率</td>
                                        <td class="py-3 text-right font-semibold text-danger">75.7%</td>
                                        <td class="py-3 text-right font-semibold text-success">94.6%</td>
                                        <td class="py-3 text-right text-danger">-20.0%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4 text-right">
                            <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                                <span>查看详情</span>
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 区域回款标签页 - 保留这个完整的标签页 -->
        <div id="payment-content" class="space-y-6 hidden">
            <!-- 区域排行榜 - 按达成率排序 -->
            <div class="bg-white rounded-lg p-4 card-shadow">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-semibold text-lg">区域回款排行榜</h3>
                    <span class="text-xs text-primary">按达成率排序</span>
                </div>
                <div class="h-[400px] w-full">
                    <canvas id="paymentRankingChart"></canvas>
                </div>
            </div>

            <!-- 区域回款卡片列表 -->
            <div class="space-y-4">
                <!-- 陕西大区 -->
                <div class="bg-white rounded-lg overflow-hidden card-shadow card-hover">
                    <div class="p-4 border-b border-neutral-100">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <h3 class="font-semibold text-lg">陕西大区</h3>
                                <span class="inline-flex items-center justify-center w-3 h-3 rounded-full bg-green-500"></span>
                            </div>
                            <span class="text-sm text-neutral-500">区域经理: 李强</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-neutral-200">
                                        <th class="py-3 text-left font-semibold text-neutral-600">指标</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2025年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2024年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">同期差异</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">年度目标</td>
                                        <td class="py-3 text-right text-neutral-800">¥4,750,900</td>
                                        <td class="py-3 text-right text-neutral-600">¥4,285,600</td>
                                        <td class="py-3 text-right text-success">+10.9%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">新签</td>
                                        <td class="py-3 text-right text-neutral-800">¥1,652,800</td>
                                        <td class="py-3 text-right text-neutral-600">¥1,425,700</td>
                                        <td class="py-3 text-right text-success">+15.9%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">在建转结</td>
                                        <td class="py-3 text-right text-neutral-800">¥1,893,500</td>
                                        <td class="py-3 text-right text-neutral-600">¥1,789,400</td>
                                        <td class="py-3 text-right text-success">+5.8%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">未结算</td>
                                        <td class="py-3 text-right text-neutral-800">¥754,200</td>
                                        <td class="py-3 text-right text-neutral-600">¥687,200</td>
                                        <td class="py-3 text-right text-danger">+9.8%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">已结算</td>
                                        <td class="py-3 text-right text-neutral-800">¥3,551,300</td>
                                        <td class="py-3 text-right text-neutral-600">¥3,132,800</td>
                                        <td class="py-3 text-right text-success">+13.4%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">诉讼</td>
                                        <td class="py-3 text-right text-neutral-800">¥210,800</td>
                                        <td class="py-3 text-right text-neutral-600">¥195,400</td>
                                        <td class="py-3 text-right text-danger">+7.9%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">抵房</td>
                                        <td class="py-3 text-right text-neutral-800">¥315,700</td>
                                        <td class="py-3 text-right text-neutral-600">¥298,500</td>
                                        <td class="py-3 text-right text-danger">+5.8%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">小计</td>
                                        <td class="py-3 text-right font-semibold text-neutral-800">¥4,750,900</td>
                                        <td class="py-3 text-right font-semibold text-neutral-600">¥4,285,600</td>
                                        <td class="py-3 text-right text-success">+10.9%</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 text-neutral-700">达成率</td>
                                        <td class="py-3 text-right font-semibold text-success">74.8%</td>
                                        <td class="py-3 text-right font-semibold text-success">73.1%</td>
                                        <td class="py-3 text-right text-success">+1.7%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4 text-right">
                            <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                                <span>查看详情</span>
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 华北大区 -->
                <div class="bg-white rounded-lg overflow-hidden card-shadow card-hover">
                    <div class="p-4 border-b border-neutral-100">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <h3 class="font-semibold text-lg">华北大区</h3>
                                <span class="inline-flex items-center justify-center w-3 h-3 rounded-full bg-yellow-500"></span>
                            </div>
                            <span class="text-sm text-neutral-500">区域经理: 张明</span>
                        </div>
                    </div>
                    <div class="p-4">
                        <div class="overflow-x-auto">
                            <table class="w-full text-sm">
                                <thead>
                                    <tr class="border-b border-neutral-200">
                                        <th class="py-3 text-left font-semibold text-neutral-600">指标</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2025年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">2024年</th>
                                        <th class="py-3 text-right font-semibold text-neutral-600">同期差异</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">年度目标</td>
                                        <td class="py-3 text-right text-neutral-800">¥5,240,300</td>
                                        <td class="py-3 text-right text-neutral-600">¥5,150,700</td>
                                        <td class="py-3 text-right text-success">+1.7%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">新签</td>
                                        <td class="py-3 text-right text-neutral-800">¥1,856,300</td>
                                        <td class="py-3 text-right text-neutral-600">¥1,721,900</td>
                                        <td class="py-3 text-right text-success">+7.8%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">在建转结</td>
                                        <td class="py-3 text-right text-neutral-800">¥2,135,700</td>
                                        <td class="py-3 text-right text-neutral-600">¥2,298,400</td>
                                        <td class="py-3 text-right text-danger">-7.1%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">未结算</td>
                                        <td class="py-3 text-right text-neutral-800">¥893,200</td>
                                        <td class="py-3 text-right text-neutral-600">¥785,300</td>
                                        <td class="py-3 text-right text-danger">+13.7%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">已结算</td>
                                        <td class="py-3 text-right text-neutral-800">¥3,598,800</td>
                                        <td class="py-3 text-right text-neutral-600">¥3,735,000</td>
                                        <td class="py-3 text-right text-danger">-3.6%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">诉讼</td>
                                        <td class="py-3 text-right text-neutral-800">¥320,500</td>
                                        <td class="py-3 text-right text-neutral-600">¥285,600</td>
                                        <td class="py-3 text-right text-danger">+12.2%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">抵房</td>
                                        <td class="py-3 text-right text-neutral-800">¥430,900</td>
                                        <td class="py-3 text-right text-neutral-600">¥359,800</td>
                                        <td class="py-3 text-right text-danger">+19.8%</td>
                                    </tr>
                                    <tr class="border-b border-neutral-100">
                                        <td class="py-3 text-neutral-700">小计</td>
                                        <td class="py-3 text-right font-semibold text-neutral-800">¥5,240,300</td>
                                        <td class="py-3 text-right font-semibold text-neutral-600">¥5,150,700</td>
                                        <td class="py-3 text-right text-success">+1.7%</td>
                                    </tr>
                                    <tr>
                                        <td class="py-3 text-neutral-700">达成率</td>
                                        <td class="py-3 text-right font-semibold text-warning">68.7%</td>
                                        <td class="py-3 text-right font-semibold text-success">72.5%</td>
                                        <td class="py-3 text-right text-danger">-3.8%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="mt-4 text-right">
                            <button class="text-primary text-sm font-medium flex items-center justify-end space-x-1 hover:underline">
                                <span>查看详情</span>
                                <i class="fa fa-angle-right"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 区域人员详情页 - 调整为全屏显示 -->
        <div id="region-detail-content" class="fixed inset-0 bg-white z-20 hidden overflow-y-auto">
            <div class="sticky top-0 bg-white z-10 border-b border-neutral-200">
                <div class="container mx-auto px-4 py-3">
                    <div class="flex items-center space-x-4">
                        <button id="region-back-button" class="text-neutral-600 hover:text-primary transition-colors">
                            <i class="fa fa-angle-left text-lg"></i>
                        </button>
                        <h2 id="region-detail-title" class="text-lg font-semibold flex-1 truncate"></h2>
                    </div>
                </div>
            </div>
            
            <div class="container mx-auto px-4 py-6">
                <!-- 区域销售人员列表 -->
                <div id="salesperson-list" class="space-y-4">
                    <!-- 人员卡片将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>
    </main>

    <!-- AI问数入口按钮 -->
    <div class="fixed bottom-6 right-6 z-20">
        <button id="ai-query-button" class="w-14 h-14 bg-primary rounded-full shadow-lg flex items-center justify-center hover:bg-primary/90 transition-colors">
            <i class="fa fa-magic text-2xl text-white"></i>
        </button>
    </div>

    <!-- AI聊天框（默认隐藏） -->
    <!-- 将原来的h-96修改为具体像素值 -->
    <div id="ai-chat-container" class="fixed bottom-6 right-6 z-30 hidden w-80 h-[500px] bg-white rounded-xl shadow-2xl flex flex-col">
        <div class="bg-primary text-white p-4 rounded-t-xl flex justify-between items-center">
            <h3 class="font-semibold">AI问数</h3>
            <button id="close-ai-chat" class="text-white hover:text-neutral-200">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div id="ai-chat-messages" class="flex-1 p-4 overflow-y-auto bg-neutral-50">
            <div class="mb-4">
                <div class="text-xs text-neutral-500 mb-1">AI助手</div>
                <div class="bg-white p-3 rounded-lg shadow-sm">
                    您好！我是您的AI问数助手。AI问数功能正在开发中，敬请期待。。。
                </div>
            </div>
        </div>
        <div class="p-3 border-t">
            <div class="flex">
                <input type="text" id="ai-query-input" placeholder="请输入您的问题..." class="flex-1 p-2 border rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary/50">
                <button id="send-ai-query" class="bg-primary text-white px-4 rounded-r-lg hover:bg-primary/90 transition-colors">
                    <i class="fa fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // AI问数相关交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const aiQueryButton = document.getElementById('ai-query-button');
            const aiChatContainer = document.getElementById('ai-chat-container');
            const closeAiChat = document.getElementById('close-ai-chat');
            const sendAiQuery = document.getElementById('send-ai-query');
            const aiQueryInput = document.getElementById('ai-query-input');
            const aiChatMessages = document.getElementById('ai-chat-messages');

            // 打开AI聊天框
            aiQueryButton.addEventListener('click', function() {
                aiChatContainer.classList.toggle('hidden');
            });

            // 关闭AI聊天框
            closeAiChat.addEventListener('click', function() {
                aiChatContainer.classList.add('hidden');
            });

            // 发送AI查询
            sendAiQuery.addEventListener('click', function() {
                sendQuery();
            });

            // 按Enter键发送查询
            aiQueryInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    sendQuery();
                }
            });

            // 发送查询的函数
            function sendQuery() {
                const query = aiQueryInput.value.trim();
                if (query) {
                    // 添加用户消息到聊天框
                    const userMessage = document.createElement('div');
                    userMessage.className = 'mb-4 text-right';
                    userMessage.innerHTML = `
                        <div class="text-xs text-neutral-500 mb-1">我</div>
                        <div class="bg-primary text-white p-3 rounded-lg shadow-sm inline-block">
                            ${query}
                        </div>
                    `;
                    aiChatMessages.appendChild(userMessage);

                    // 清空输入框
                    aiQueryInput.value = '';

                    // 滚动到底部
                    aiChatMessages.scrollTop = aiChatMessages.scrollHeight;

                    // 模拟AI回复（实际项目中这里应该调用API）
                    setTimeout(function() {
                        const aiMessage = document.createElement('div');
                        aiMessage.className = 'mb-4';
                        aiMessage.innerHTML = `
                            <div class="text-xs text-neutral-500 mb-1">AI助手</div>
                            <div class="bg-white p-3 rounded-lg shadow-sm">
                                感谢您的问题！这是一个很好的数据分析需求。\n\n由于这是演示环境，我无法访问实际的销售数据。在真实环境中，我会根据您的问题查询相关数据并提供深入分析。\n\n您可以尝试问我："本月销售额最高的区域是哪个？"或"最近三个月的销售趋势如何？"
                            </div>
                        `;
                        aiChatMessages.appendChild(aiMessage);
                        
                        // 再次滚动到底部
                        aiChatMessages.scrollTop = aiChatMessages.scrollHeight;
                    }, 1000);
                }
            }
        });
    </script>

    <!-- 引入Chart.js -->
    <script src="chart.js"></script>
    <!-- 添加ChartDataLabels插件 -->
    <script src="chartjs-plugin-datalabels.min.js"></script>
    <script src="script.js"></script>
</body>
</html>